<template>
  <el-button type="primary" @click="downloadExcel" v-if="isVisible" style="width: 100px">下载 Excel</el-button>
  <el-image-viewer v-if="showImageViewer" :initial-index="initialIndex" :on-switch="onSwitch" :url-list="url" @close="close"></el-image-viewer>
  <div class="table-container">
  <el-table :data="paginatedTableData" :cell-style="{ textAlign: 'center' }"
       :header-cell-style="{ 'text-align': 'center' }" v-loading="loading" style="width: 100%" height="fit-content" >
    <el-table-column fixed prop="note_id" label="笔记id" width="130" />
  <el-table-column prop="nickname" label="发布者用户名" width="120" />
    <el-table-column  label="用户头像" width="120">
      <template #default='scope'>
        <el-image :src="scope.row.avatar" style="width: 60px;height: 60px" @click="showImg([scope.row.avatar])" ></el-image>      </template>
    </el-table-column>
<!--  <el-table-column prop="avatar" label="发布者头像url" width="120" />-->
  <el-table-column prop="note_title" label="笔记标题" width="120"/>
  <el-table-column prop="note_content" label="笔记内容" width="120">
    <template #default='scope'>
					<el-popover
					placement="top-start"
					width="400"
					trigger="hover">
						<span>{{scope.note_content}}</span>
						<span slot="reference">{{scope.row.note_content.substr(1,20) + '...'}}</span>
					</el-popover>
				</template>
  </el-table-column>
<!--  <el-table-column prop="img_url_list" label="图片url" width="120">-->
<!--    </el-table-column>-->
    <template v-for="index in imgColumnCount" :key="index">
      <el-table-column :label="`图片${index}`" width="120">
<!--        <el-table-column :prop="`img_url_list[${index - 1}]`" :label="`图片${index}`" width="120" />-->
                <template #default="scope">
          <el-image :src="scope.row.img_url_list[index - 1]" @click="showImg(scope.row.img_url_list, index-1)"  style="width: 100%; height: auto;" fit="cover"></el-image>
        </template>
      </el-table-column>
    </template>
  <el-table-column label="视频信息" >
    
    <el-table-column prop="video_url" label="视频url" width="120" />
    <el-table-column prop="duration" label="视频时长(单位:s)" width="140" />
  </el-table-column>
  <el-table-column prop="ip_location" label="ip所属地方" width="120" />
  <el-table-column prop="liked_count" label="点赞数" width="120" />
  <el-table-column prop="collected_count" label="收藏数" width="120" />
  <el-table-column prop="comment_count" label="评论数" width="120" />
  <el-table-column prop="share_count" label="分享数" width="120" />
  <el-table-column prop="tag_list" label="标签列表" width="120" />
  </el-table>
  </div>
  <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled=false
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

</template>

<script setup>
import {ref, watch, computed} from "vue"
import {get_preview_url} from "@/api/minio.js"
import axios from "axios";
import * as XLSX from 'xlsx'
const imgUrlList = ref([])
const props = defineProps({
    tableData:{
        type : Array,
        required: true
    },
    loading:{
      type :Boolean,
      // required:
      default: false
    },
  isVisible:{
      type:Boolean,
      default:true
  }
})
// 分页状态
const currentPage = ref(1);
const pageSize = ref(10);
// 计算图片url栏的数量
const imgColumnCount = ref(0)
const handleSizeChange = (val) => {
  pageSize.value = val
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  console.log(`current page: ${val}`)
}
// 计算当前页的数据
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.tableData.slice(start, end);
});
watch(() => props.tableData, (newVal) => {
  let maxImgCount = 0
  newVal.forEach(data => {
    if (data.img_url_list.length > maxImgCount) {
      maxImgCount = data.img_url_list.length
    }
  })
  imgColumnCount.value = maxImgCount
})
const downloadExcel = () => {
  const excelData = generateExcelData(props.tableData);
  downloadExcelFile(excelData);
};

const generateExcelData = (tableData) => {
  // 获取最多图片数量的列名列表
  const imgColumns =  Array.from({ length: imgColumnCount.value }, (_, i) => `图片${i + 1}`);
  // 构建 Excel 数据
  const excelData = tableData.map((row) => {
    const rowData = [
    row.note_id,
        row.nickname,
        row.avatar,
        row.note_title,
        row.note_content,
    // 添加图片url数据
        ...imgColumns.map((column) => {
        const columnIndex = parseInt(column.substring(2)) - 1; // 将列名转换为索引
        return row.img_url_list[columnIndex]; // 使用转换后的索引访问图片url列表中的值
    }),
        row.video_url,
        row.duration,
        row.ip_location,
        row.liked_count,
        row.collected_count,
        row.comment_count,
        row.share_count,
        row.tag_list.join(', '), // 将标签列表转换为逗号分隔的字符串
  ];
    return rowData;
  });

  // 插入表头
  const headers = ["笔记ID", "发布者用户名","用户头像url", "笔记标题", "笔记内容" , ...imgColumns,"视频url", "视频时长(单位:s)", "ip所属地方", "点赞数", "收藏数", "评论数", "分享数", "标签列表"];
  excelData.unshift(headers);

  return excelData;
};
const downloadExcelFile = (data) => {
  const ws = XLSX.utils.aoa_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "table_data.xlsx");
};
const showImageViewer = ref(false)
const initialIndex = ref(0)
const url = ref([])
const showImg = (imgUrl, index=0) => {
  console.log(imgUrl)
  url.value = imgUrl
  initialIndex.value = index
  showImageViewer.value = true
}
const close = () => {
  showImageViewer.value = false
}
const onSwitch = (val) =>{
  console.log(val)
}
</script>

<style>
.table-container {
  width: 100%;
  overflow-x: auto;
}
</style>